<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-button type="primary" @click="handleMemberCard()">会员卡号规则</a-button>
      <a-button type="primary" @click="handleLevel()" style="margin-left:10px">会员等级设置</a-button>
      <a-divider />
      <a-row :gutter="16" type="flex" justify="center">
        <a-col :order="isMobile ? 2 : 1" :md="24" :lg="24">
          <a-form layout="horizontal">
            <a-form-item
              label="会员卡ID"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
            >
              <a-input />
            </a-form-item>
            <a-form-item
              label="激活送积分"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
            >
              <a-input />
            </a-form-item>
            <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
              <a-button type="primary" @click="handle()">设置</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <card-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      :option="option"
      @cancel="handleCancel"
      @ok="handleOk"
    />
  </page-header-wrapper>
</template>
    
<script>
import { baseMixin } from '@/store/app-mixin'
import CardForm from './cardForm'
export default {
  name: 'MemberCard',
  components: {
    CardForm,
  },
  mixins: [baseMixin],
  data() {
    return {
      // cropper
      mdl: null,
      visible: false,
      value: '',
      confirmLoading: false,
      preview: {},
      option: {
        img: '/avatar2.jpg',
        info: true,
        size: 1,
        outputType: 'jpeg',
        canScale: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 180,
        autoCropHeight: 180,
        fixedBox: true,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1],
      },
    }
  },
  methods: {
    handleLevel(){
      this.$router.push({ path: `/system/wechat/memberLevel` })
    },
    handleMemberCard(){
      this.confirmLoading = false
      this.visible = true
    },
    handleEdit(record) {
      this.mdl = { ...record }
      this.confirmLoading = false
      this.visible = true
    },
    handleOk() {
      this.confirmLoading = true
      const form = this.$refs.createModal.form
      form.validateFields((errors, values) => {
        if (!errors) {
          this.$message.warn('开发中')
          this.confirmLoading = false
        } else {
          this.$message.warn('开发中')
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.visible = false
      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    handle() {
      this.$message.warn('开发中')
    },

  },
}
</script>